<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>50-this指向总结</title>
</head>
<body>
    <button>点击</button>
    <script>
        // this指向总结
        // 1. 普通函数
        // 1.1 全局内调用
        function fn() {
            console.log(this) // window
        }
        fn()

        // 1.2 对象内调用
        const obj = {
            name:'老八',
            sayHi() {
                console.log(this) // obj {name: '老八', sayHi: ƒ}
            }
        }
        obj.sayHi()
        
        // 1.3 构造函数内this
        function Person(name) {
            this.name = name
            console.log(this)  // 指向实例对象  '老八'
        }
        const lb = new Person('老八')

        // 1.4 事件处理函数中的this
        document.querySelector('button').addEventListener('click',function () {
            console.log(this) // <button>点击</button>
        })

        // 1.5 调用call apply bind 可以改变this指向
        const o = {name: '老八'}
        function fun() {
            console.log(this) // {name: '老八'}
        }
        fun.call(o)

        // 2. 箭头函数 没有this,是沿用上一级作用域的this

    </script>
</body>
</html>